<template>
	<view class="container">
		  <view class="total-box">
		    <view class="title">你对本次购物满意吗？</view>
		    <view class="goods-image">
				<template v-for="(item, index) in orderInfo.orderitem" v-key="index">
					<image :src="item.image"></image>
				</template>
		      
		    </view>
		    <view class="item">
		      <view class="item-title">服务</view>
		      <view class="item-star">
				  <template v-for="(item, index) in stardata" v-key="index">
				  	<image @click="changeColor(0, item)" :src="flag[0] >= item ? '/static/star@selected.png': '/static/star.png'"/>
				  </template>
		        <view>{{startext[0]}}</view>
		      </view>
		    </view>
		    <view class="item">
		      <view class="item-title">物流</view>
		      <view class="item-star">
				  <template v-for="(item, index) in stardata" v-key="index">
				  	<image @click="changeColor(1, item)" :src="flag[1] >= item ? '/static/star@selected.png': '/static/star.png'"/>
				  </template>
					<view>{{startext[1]}}</view>
		      </view>
		    </view>
		    <view class="item">
		      <view class="item-title">商品</view>
		      <view class="item-star">
				  <template v-for="(item, index) in stardata" v-key="index">
				  	<image @click="changeColor(2, item)" :src="flag[2] >= item ? '/static/star@selected.png': '/static/star.png'"/>
				  </template>
		        <view>{{startext[2]}}</view>
		      </view>
		    </view>
		  </view>
		  <view class="contact">
		    <button open-type="contact">
		      <image src="@/static/contact.png"></image>
		      <text style="color: #000;" decode="ensp">购物遇到问题？可以尝试&ensp;</text>
		      <text>联系客服</text>
		    </button>
		  </view>
		
		  <view class="goods-box">
		    
		  </view>
		
		  <view class="order-item-bottom">
		    <view class="left"></view>
		    <view class="right">
		      <view class="pay" @click="query">提交</view>
		    </view>
		  </view>
	</view>
</template>

<script>
	import { Order } from '@/utils/model/order-model.js';
	var order = new Order();
	
	export default {
		data() {
			return {
				orderId: 0,
				orderInfo: {},
				flag:[0, 0, 0],  //每行标记变量 改变显示的五角星
				startext: ['', '', ''],   //各个下标对应每行显示  5个评价中的一个 非常不满意/不满意
				stardata: [1, 2, 3, 4, 5],  //每颗星星对应的数值  决定了渲染出几颗五角星
			}
		},
		onLoad(options) {
			// 记录订单ID
			this.orderId = Number(options.id)
			console.log('vvvvvvvvvv')
			this.getDetail()
		},
		
		methods: {
			getDetail() {
				const that = this;
				uni.showLoading({
					title: '正在加载中'
				})
				order.getDetail(that.orderId).then((res) => {
					if(res.code == 1){
						that.orderInfo = res.data.detail
					}else{
						uni.showToast({
							title: res.msg
						})
					}
				}).catch((err) => {
					console.log(err)
					console.log('bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb')
				}).finally(
					uni.hideLoading()
				)
			},
			
			// 五星评价事件
			changeColor(index, num) {
			    var that = this;
			    if(num == 1) {
					this.flag[index] = 1;
					this.startext[index] = '很差';
			    } else if (num == 2){
					this.flag[index] = 2;
					this.startext[index] = '不满意';
			    } else if (num == 3) {
					this.flag[index] = 3;
					this.startext[index] = '一般';
			    } else if (num == 4) {
					this.flag[index] = 4;
					this.startext[index] = '满意';
			    } else if (num == 5) {
					this.flag[index] = 5;
					this.startext[index] = '很满意';
			    }
				 this.$forceUpdate()
			},
			  //提交评价
			  query(){
			    //flag:[0, 0, 0],  //每行标记变量 改变显示的五角星
			    //startext: ['', '', ''],   //各个下标对应每行显示  5个评价中的一个 非常不满意/不满意
			    //stardata: [1, 2, 3, 4, 5],  //每颗星星对应的数值  决定了渲染出几颗五角星
			    let flag = this.flag;
			    let startext = this.startext;
			    let order_id = this.orderId;
			
			    let goods_ids = [];
			    this.orderInfo.orderitem.forEach(element => {
			      goods_ids.push(element.goods_id);
			    });
			    let commentInfo = {
			      order_id: order_id,
			      service_score: flag[0],
			      service_txt: startext[0],
			      delevery_score: flag[1],
			      delevery_txt: startext[1],
			      goods_score: flag[2],
			      goods_txt: startext[2],
			      goods_ids: goods_ids.toString()
			    }
			    order.comment(commentInfo).then(res => {
			      console.log(res);
			      console.log('3333333333333333333333333333333')
			      if(res.code == 1){
					  uni.showModal({
					  	title: '友情提示',
					  	content: res.msg,
					  	showCancel: false,
					  	success() {
					  		uni.navigateBack()
					  	}
					  }) 
			      }
			    })
			  },
		}
	}
</script>

<style>
	page{
		background-color: #F5F5F5;
	}
</style>
 
<style scoped lang="scss">
	@import '~@/pages/order/comment.scss';
</style>